<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + request.getContextPath();
    request.setAttribute("basePath", basePath); // 将BasePath的内容保存在application属性之中
%>
    <head>
        <meta charset="utf-8">
        <title>养老院管理系统</title>
        <link rel="icon" href="img/ico.ico" type="image/x-icon"/>
        <base href="<%=basePath%>/"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <!-- CSS -->
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/supersized.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
        <script src="js/supersized.3.2.7.min.js"></script>
        <script src="js/supersized-init.js"></script>
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>

    <body oncontextmenu="return false">
    <c:if test="${msg == 'org.apache.shiro.authc.IncorrectCredentialsException'}">
        登录密码错误！
    </c:if>
    <c:if test="${msg == 'org.apache.shiro.authc.UnknownAccountException'}">
        该用户名不存在！
    </c:if>
    <c:if test="${msg == 'org.apache.shiro.authc.LockedAccountException'}">
        该用户已经被锁定！
    </c:if>
    <c:if test="${param.kickmsg != null}">
        您已经在其它设备上进行了登录，如果不是您本人操作，请修改密码！
    </c:if>
    <div class="page-container">
            <h1>养老院管理系统</h1>
            <form action="loginShiro.action" method="post">
				<div>
					<input type="text" name="mobile" value="123" class="username" placeholder="账号..." autocomplete="off" style="width:310px;"/>
				</div>
                <div>
					<input type="password" name="pwd" value="hello" class="password" placeholder="密码..." oncontextmenu="return false" onpaste="return false" style="width:310px;"/>
                </div>
                <div>
                    <input type="text" id="code" name="code" class="form-control" style="width:195px;
                    text-align: left; margin-left: 0px; vertical-align:middle"
                           placeholder="验证码..." size="4" maxlength="4">
                    <img id="imageCode" src="ImageCode" style=" vertical-align:middle" >
                </div>
                <div style="text-align: left; margin-left: 25px;">
                    <label>
                        <input type="checkbox" checked name="rememberme" value="true" style="width: 10px; height: 10px;">
                        记住我
                    </label>
                </div>
                <button id="submit" type="submit">登录</button>
            </form>
            <div class="connect">
                <p>If we can only encounter each other rather than stay with each other,then I wish we had never encountered.</p>
				<p style="margin-top:20px;">如果只是遇见，不能停留，不如不遇见。</p>
            </div>
        </div>
		<div class="alert" style="display:none">
			<h2>消息</h2>
			<div class="alert_con">
				<p id="ts"></p>
				<p style="line-height:70px"><a class="btn">确定</a></p>
			</div>
		</div>

        <!-- Javascript -->

		<script>
            $("#imageCode").click(function () {
                $("#imageCode").attr("src", "ImageCode?p=" + Math.random());
            });

		$(".btn").click(function(){
			is_hide();
		})
		var u = $("input[name=mobile]");
		var p = $("input[name=pwd]");
		$("#submit").live('click',function(){
			if(u.val() == '' || p.val() =='')
			{
				$("#ts").html("用户名或密码不能为空~");
				is_show();
				return false;
			}
			else{
				var reg = /^[0-9A-Za-z]+$/;
				if(!reg.exec(u.val()))
				{
					$("#ts").html("用户名或密码错误");
					is_show();
					return false;
				}
			}
		});
		window.onload = function()
		{
			$(".connect p").eq(0).animate({"left":"0%"}, 600);
			$(".connect p").eq(1).animate({"left":"0%"}, 400);
		}
		function is_hide(){ $(".alert").animate({"top":"-40%"}, 300) }
		function is_show(){ $(".alert").show().animate({"top":"45%"}, 300) }
		</script>
    </body>
